<template>
	<view class="home">
		<view class="scrollNav">
			<scroll-view scroll-x class="navScroll" > <!--横向滚动-->
				<view class="item" 
				:class="index==navIndex ? 'active':''" 
				v-for="(item,index) in navArr" @click="clickNav(index,item.id)" :key="item.id">
				{{item.classname}}
				</view>
			</scroll-view>
		</view>
		<view class="content">
			<view class="row" v-for="item in newsArr" :key="item.id">
				<newsbox :item='item'></newsbox><!--如给组件绑定原生事件需要.native-->
			</view>
		</view>
		<view class="nodata" v-if="!newsArr.length"> <!--判断是否有数据-->
			<image src="../../static/image/noData.png" mode="widthFix"></image>
		</view>
		
		<view>
			
		</view>
		<view class="loading" >
			<view v-if="loading==1">
				数据加载中...
			</view>
			<view v-if="loading==2">
				没有更多了~
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navIndex:0,
				navArr:[],
				newsArr:[],
				currentPage:1,
				loading:0  //状态默认0 1加载 2没有更多了
			}
		},
		onLoad() {  //页面加载完毕后
			this.getNavData() 
			this.getNewsData()
		},
		onReachBottom() {  //触底生命周期
			console.log("到底部了")
			if(this.loading == 2){ //如果已经没有数据则放弃发送请求
				return
			}
			this.currentPage++ //触底加页 
			this.loading == 1  //数据加载中
			this.getNewsData() //调用内容
		},
		methods: {
			//点击导航切换
			clickNav(index,id){
				this.navIndex = index //把index传过去，索引值点击高亮
			    console.log(id)
				this.currentPage = 1  //点击切换导航页面初始化
				this.newsArr = []     //清空原数组
				this.loading = 0     //清空状态
				this.getNewsData(id)  //点击调用并加载数据
			},
			
			//导航数据请求
			getNavData(){
				uni.request({
					url:"https://ku.qingnian8.com/dataApi/news/navlist.php",
					success:res=>{  //拿结果
						console.log(res)
						this.navArr = res.data 
					}
				})
			},
			
			//新闻数据请求
			getNewsData(id=50){
				uni.request({
					url:"https://ku.qingnian8.com/dataApi/news/newslist.php",
				    data:{
						cid:id,  //导航栏内容id
						page:this.currentPage  //页面默认1
					},
					success:res=> {
				    	console.log(res)
						if(res.data.length == 0){  //判断是否触底没有数据了
							this.loading = 2
						}
						this.newsArr = [...this.newsArr,...res.data]  //触底加页时使得新老数组拼接
				    }
				})
			}
		}
	}
</script>

<style lang="scss" scoped> /*局部*/
	.navScroll{
		height: 100rpx;
		background-color: #f7f8fa;
		white-space: nowrap;  /*保持不换行*/
		position: fixed; /*固定定位固定顶部栏*/
		top: var(--window-top); /*相当于原来的0,设置变量值防止h5差异化*/
		left: 0;
		z-index: 10;
		/deep/ ::-webkit-scrollbar{ /*去除滚动条*/
			width: 4px !important;
			height: 1px !important;
			 overflow: auto !important;
			 background: transparent !important;
			 -webkit-appearance:auto !important;
			 display: block;
		}
		.item{
			font-size: 40rpx;
			display: inline-block;  /*转行内样式*/
			line-height: 100rpx;  /*行高*/
			padding:0 30rpx;  /*上下 左右*/
			color: #333;
			&.active{ 
				color: #00BFFF;
			}
		}
	}
	
	.content{
		padding: 30rpx;
		padding-top: 130rpx;/*补上固定高度*/
		.row{
			border-bottom: 1px dotted #efefef; /*点线式*/
			padding: 20rpx 0;
		}
	}
	.nodata{
		display: flex;
		justify-content: center;
		image{
			width: 400rpx;
		}
	}
	.loading{
		text-align: center;
		font-size: 26rpx;
		color: #888;
		line-height: 2em; //2倍行高
	}
</style>
